<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最终功能测试</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            padding: 20px; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container { 
            max-width: 1000px; 
            margin: 0 auto; 
            background: white; 
            padding: 30px; 
            border-radius: 15px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .test-section { 
            margin-bottom: 30px; 
            padding: 20px; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            background: #f8f9fa;
        }
        .test-section h3 { 
            color: #333; 
            margin-bottom: 15px; 
        }
        .btn { 
            padding: 10px 20px; 
            margin: 5px; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .btn-primary { 
            background: #007bff; 
            color: white; 
        }
        .btn-primary:hover { 
            background: #0056b3; 
            transform: translateY(-2px);
        }
        .btn-success { 
            background: #28a745; 
            color: white; 
        }
        .btn-success:hover { 
            background: #218838; 
            transform: translateY(-2px);
        }
        .btn-danger { 
            background: #dc3545; 
            color: white; 
        }
        .btn-danger:hover { 
            background: #c82333; 
            transform: translateY(-2px);
        }
        .result { 
            margin-top: 15px; 
            padding: 15px; 
            border-radius: 8px; 
            font-weight: bold;
        }
        .success { 
            background: #d4edda; 
            color: #155724; 
            border: 1px solid #c3e6cb;
        }
        .error { 
            background: #f8d7da; 
            color: #721c24; 
            border: 1px solid #f5c6cb;
        }
        .info { 
            background: #d1ecf1; 
            color: #0c5460; 
            border: 1px solid #bee5eb;
        }
        h1 { 
            text-align: center; 
            color: #333; 
            margin-bottom: 30px; 
        }
        .file-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }
        .file-item {
            background: white;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            text-align: center;
        }
        .file-item a {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }
        .file-item a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 最终功能测试</h1>
        
        <div class="test-section">
            <h3>1. 系统状态检查</h3>
            <p>检查当前系统状态和用户数据</p>
            <button class="btn btn-primary" onclick="checkSystemStatus()">检查状态</button>
            <div id="statusResult"></div>
        </div>
        
        <div class="test-section">
            <h3>2. 清空数据重新开始</h3>
            <p>清空所有数据，确保从干净状态开始测试</p>
            <button class="btn btn-danger" onclick="clearAllData()">清空所有数据</button>
            <div id="clearResult"></div>
        </div>
        
        <div class="test-section">
            <h3>3. 创建测试用户</h3>
            <p>创建预置的测试用户账号</p>
            <button class="btn btn-success" onclick="createTestUsers()">创建测试用户</button>
            <div id="createResult"></div>
        </div>
        
        <div class="test-section">
            <h3>4. 功能测试</h3>
            <p>测试各个功能页面</p>
            <div class="file-list">
                <div class="file-item">
                    <a href="start.html" target="_blank">开始页面</a>
                </div>
                <div class="file-item">
                    <a href="simple-auth.html" target="_blank">登录注册</a>
                </div>
                <div class="file-item">
                    <a href="simple-index.html" target="_blank">主页面</a>
                </div>
                <div class="file-item">
                    <a href="dish-upload.html" target="_blank">菜品上传</a>
                </div>
                <div class="file-item">
                    <a href="test-registration.html" target="_blank">注册测试</a>
                </div>
                <div class="file-item">
                    <a href="clear-data.html" target="_blank">数据管理</a>
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h3>5. 测试流程</h3>
            <p>建议的测试流程：</p>
            <div class="info">
                1. 点击"清空所有数据"<br>
                2. 点击"创建测试用户"<br>
                3. 打开"登录注册"页面<br>
                4. 使用测试账号登录（admin/123456）<br>
                5. 检查是否正确跳转到主页面<br>
                6. 测试权限控制（尝试访问其他角色界面）<br>
                7. 测试注册新用户功能<br>
                8. 测试菜品上传功能（商家账号）
            </div>
        </div>
        
        <div class="test-section">
            <h3>6. 文件结构</h3>
            <p>当前项目文件结构：</p>
            <div class="file-list">
                <div class="file-item">start.html<br><small>系统入口</small></div>
                <div class="file-item">simple-auth.html<br><small>登录注册</small></div>
                <div class="file-item">simple-index.html<br><small>主页面</small></div>
                <div class="file-item">dish-upload.html<br><small>菜品上传</small></div>
                <div class="file-item">database.js<br><small>数据管理</small></div>
                <div class="file-item">clear-data.html<br><small>数据工具</small></div>
                <div class="file-item">test-registration.html<br><small>注册测试</small></div>
                <div class="file-item">fix-registration.html<br><small>问题修复</small></div>
                <div class="file-item">README.md<br><small>项目说明</small></div>
                <div class="file-item">使用说明.md<br><small>使用指南</small></div>
            </div>
        </div>
    </div>

    <script>
        function checkSystemStatus() {
            try {
                const users = JSON.parse(localStorage.getItem('users') || '[]');
                const currentUser = localStorage.getItem('currentUser');
                
                let html = '<div class="info">';
                html += '📊 系统状态:<br><br>';
                html += `👥 用户数量: ${users.length}<br>`;
                html += `🔐 当前登录: ${currentUser ? '是' : '否'}<br>`;
                
                if (currentUser) {
                    const user = JSON.parse(currentUser);
                    html += `👤 登录用户: ${user.name} (${user.type})<br>`;
                }
                
                if (users.length > 0) {
                    html += '<br>📋 用户列表:<br>';
                    users.forEach((user, index) => {
                        html += `${index + 1}. ${user.username} (${user.type})<br>`;
                    });
                }
                
                html += '</div>';
                document.getElementById('statusResult').innerHTML = html;
            } catch (error) {
                document.getElementById('statusResult').innerHTML = 
                    '<div class="error">❌ 检查失败: ' + error.message + '</div>';
            }
        }
        
        function clearAllData() {
            try {
                localStorage.removeItem('users');
                localStorage.removeItem('currentUser');
                document.getElementById('clearResult').innerHTML = 
                    '<div class="success">✅ 所有数据已清空！现在可以重新开始测试了。</div>';
            } catch (error) {
                document.getElementById('clearResult').innerHTML = 
                    '<div class="error">❌ 清空失败: ' + error.message + '</div>';
            }
        }
        
        function createTestUsers() {
            try {
                const testUsers = [
                    { id: 1, username: 'admin', password: '123456', phone: '13800138000', email: 'admin@test.com', type: 'user', name: '管理员' },
                    { id: 2, username: 'merchant1', password: '123456', phone: '13800138001', email: 'merchant@test.com', type: 'merchant', name: '测试商家' },
                    { id: 3, username: 'rider1', password: '123456', phone: '13800138002', email: 'rider@test.com', type: 'rider', name: '测试骑手' }
                ];
                
                localStorage.setItem('users', JSON.stringify(testUsers));
                document.getElementById('createResult').innerHTML = 
                    '<div class="success">✅ 测试用户创建成功！<br>用户: admin/123456<br>商家: merchant1/123456<br>骑手: rider1/123456</div>';
            } catch (error) {
                document.getElementById('createResult').innerHTML = 
                    '<div class="error">❌ 创建失败: ' + error.message + '</div>';
            }
        }
        
        // 页面加载时自动检查状态
        window.onload = function() {
            checkSystemStatus();
        };
    </script>
</body>
</html>
